<template>
	<view class="container">
		<view class="kind-title">清洗</view>
		<view class="line-title f-center">智能洗衣洗护专家</view>
		<view v-if="isfetch" style="padding: 0 32rpx;">
			<view v-if="goodsList.length > 0">
				<view class="flex f-justifyB wrap">
					<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="selectHandle(item)">
						<view style="width: 270rpx;" class="text-overflow font26 f-center gray333">{{item.goodsName}}</view>
						<image :src="item.goodsUrl" class="item-img"></image>
						<view class="flex f-align f-justifyB w100">
							<view class="font40 gray333"><text class="font26 blue">￥</text>{{item.goodsMoney}}</view>
							<view class="f-center" style="width: 46rpx;height: 46rpx;justify-content: flex-end;">
								<image src="../static/img/fenleijiahao@2x.png" style="width: 33rpx;height: 33rpx;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex f-column f-align" v-else>
				<text class="font36 gray999 bold mt50">暂无洗护套餐</text>
			</view>
		</view>

		<uni-popup ref="uniPopup" type="bottom">
			<view class="service-box flex f-column">
				<image src="../static/img/close-blue.png" class="close-btn" @click="closePopup()"></image>
				<text class="font36" style="align-self: center;">增值服务</text>
				<view class="mt30 img-box flex f-align">
					<view class="inner-box">
						<image :src="selectItem.goodsUrl" mode=""></image>
					</view>
				</view>
				<text class="font28 gray333 mt40">必选项目</text>
				<view class="flex wrap">
					<view class="f-item active">清洗</view>
				</view>
				<text class="font28 gray333" style="margin-top: 70rpx;">增值服务</text>
				<text class="font22 gray999">(因修复价格不等，收到衣物后将根据项目进行划价，取衣时需支付额外费用，请您提前咨询客服了解修复价格，以免造成不便)</text>
				<view class="flex wrap">
					<view @click="selectProject(item)" class="f-item" :class="{'active': item.check}" v-for="(item,index) in itemList" :key="index">{{item.projectName}}</view>
				</view>
				<view class="font32 white join-btn f-center" @click="confirm">确定</view>
			</view>
		</uni-popup>

		<!-- 滑动框 -->
		<view class="ready-box flex f-column f-align" :class="{'ready-active': isReady}">
			<scroll-view scroll-x="true" class="scroll-X">
				<block v-for="(item,index) in orderDetail" :key="index">
					<view class="item-box">
						<view style="width: 186rpx;" class="text-overflow font22 f-center gray333">{{item.goodName}}</view>
						<image :src="item.goodsUrl" style="width: 100rpx;height: 100rpx;margin: 10rpx auto;display: block;"></image>
						<view class="font30 gray333"><text class="font22 blue">￥</text>{{item.goodMoney}}</view>
						<image src="../static/img/delete.png" class="del-icon" @click="deleteHandle(index)"></image>
					</view>
				</block>
			</scroll-view>
			<view class="btn f-center font32 white" @click="readyHandle">
				选择好了({{orderDetail.length}})
			</view>
		</view>
		<view class="fixed-btn font30 white flex f-align" @click="showReady">
			<text v-if="!isReady">{{orderDetail.length || ''}}</text>
			<text v-else>》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
				isfetch: false,
				goodsList: [],
				goods_id: '',

				isReady: false,
				orderNumber: '',
				orderDetail: [],
				selectItem: {}
			}
		},
		onLoad(option) {
			this.orderNumber = option.orderNumber
			this.getKindList()
			this.getGoodsList()
		},
		methods: {
			readyHandle() {
				uni.showLoading({
					title: '请求中，请稍后...',
					mask: true
				})
				
				this.$http.ajax({
					url: '/OrderDetail/add',
					params: {
						orderDetail: JSON.stringify(this.orderDetail),
						adminId: uni.getStorageSync('adminId'),
						orderNumber: this.orderNumber
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						this.$api.msg('结算成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 300)
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			deleteHandle(index) {
				this.orderDetail.splice(index, 1)
				if (this.orderDetail.length == 0) {
					this.isReady = false
				}
			},
			showReady() {
				if (this.isReady) {
					this.isReady = false
					return
				}

				if (!this.orderDetail.length) {
					this.$api.msg('请先选择洗护套餐')
					return
				}

				this.isReady = true
			},
			confirm() {
				let arr = this.itemList.filter(item => item.check)

				this.orderDetail.push({
					projectId: arr.map(item => item.id).join(','),
					goodName: this.selectItem.goodsName,
					projectName: arr.map(item => item.projectName).join(','),
					goodMoney: this.selectItem.goodsMoney,
					goodsUrl: this.selectItem.goodsUrl,
					isUseDiscounts: this.selectItem.isUseDiscounts
				})

				this.closePopup()
			},
			closePopup() {
				this.selectItem = {}
				this.itemList.forEach(item => item.check = false)
				this.$refs.uniPopup.close()
			},
			selectHandle(item) {
	
				this.selectItem = item
				this.$refs.uniPopup.open()
			},
			selectProject(item) {
				item.check = !item.check
				this.$forceUpdate()
			},
			getKindList() {
				this.$http.ajax({
					url: '/Project/list',
					params: {
						page: 1,
						limit: 99
					},
					isOP: 0
				}).then((res) => {
					if (res.code == 200) {
						res.data.forEach(item => item.check = false)
						this.itemList = res.data
					}
				})
			},
			getGoodsList() {
				this.$http.ajax({
					url: '/Goods/list',
					params: {
						page: 1,
						limit: 999
					}
				}).then((res) => {
					console.log("人家说啥是啥吗")
					console.log(res);
					this.isfetch = true
					if (res.code == 0) {
						this.goodsList = res.data
					} else {
						this.goodsList = []
						this.$api.msg(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.fixed-btn {
		position: fixed;
		bottom: calc(constant(safe-area-inset-bottom) + 164rpx);
		bottom: calc(env(safe-area-inset-bottom) + 164rpx);
		right: -60rpx;
		width: 110rpx;
		height: 110rpx;
		background: linear-gradient(-21deg, #4082FD, #73A4FF);
		box-shadow: 0rpx 5rpx 11rpx 0rpx rgba(48, 115, 239, 0.4800);
		border-radius: 50%;
		z-index: 99;
		padding-left: 20rpx;
	}

	.ready-box {
		position: fixed;
		bottom: 0;
		left: 750rpx;
		width: 750rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx -3rpx 6rpx 0rpx rgba(0, 0, 0, 0.1100);
		transition: left .2s;
		z-index: 10;
		padding: 45rpx 25rpx 0;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);

		.scroll-X {
			width: 100%;
			height: 214rpx;
			white-space: nowrap;

			.item-box {
				width: 186rpx;
				height: 194rpx;
				border: 1rpx solid #4082FD;
				border-radius: 6rpx;
				margin: 0 17rpx;
				display: inline-block;
				position: relative;
				margin-top: 20rpx;
			}
			
			.del-icon {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: -18rpx;
				top: -18rpx;
				z-index: 10;
			}
		}

		.btn {
			width: 300rpx;
			height: 92rpx;
			background: #4082FD;
			border-radius: 46rpx;
			margin-top: 33rpx;
		}
	}

	.ready-active {
		left: 0;
	}

	.service-box {
		width: 750rpx;
		background: #ffffff;
		padding: 40rpx 32rpx;
		border-radius: 60rpx 60rpx 0 0;
		position: relative;
		
		.img-box {
			width: 686rpx;
			height: 264rpx;
			border-radius: 12rpx;
			background-image: url('https://xx.img.dz888.shop/wx1.jpg');
			
			background-size: 100% 100%;
			padding-left: 50rpx;
			
			.inner-box {
				width: 170rpx;
				height: 170rpx;
				background: #3D99FE;
				border: 1rpx solid #FFFFFF;
				box-shadow: 2rpx 4rpx 11rpx 0rpx rgba(20,65,143,0.45);
				border-radius: 14rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 14rpx;
				}
			}
		}

		.f-item {
			width: 130rpx;
			height: 60rpx;
			background: #EBEBEB;
			border-radius: 8rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			color: #777777;
			text-align: center;
			margin-right: 55rpx;
			margin-top: 20rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}
		}

		.active {
			background: #4082FF;
			color: #FFFFFF;
		}

		.join-btn {
			width: 686rpx;
			height: 72rpx;
			background: #4082FF;
			border-radius: 38rpx;
			box-shadow: 0rpx -6rpx 12rpx rgba(24, 70, 157, 0.1);
			margin-top: 100rpx;
		}

		.close-btn {
			width: 59rpx;
			height: 59rpx;
			position: absolute;
			right: 28rpx;
			top: 28rpx;
			z-index: 99;
		}
	}


	.goods-item {
		width: 330rpx;
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 0rpx 8rpx 12rpx rgba(24, 70, 157, 0.53);
		border-radius: 8rpx;
		margin-top: 20rpx;
		position: relative;
		padding: 25rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.item-img {
			width: 200rpx;
			height: 200rpx;
			margin: 10rpx 0;
		}
	}

	.container {
		padding: 0;

		.kind-title {
			width: 750rpx;
			height: 80rpx;
			background: rgba(236, 234, 234, 1);
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			line-height: 80rpx;
			color: #000000;
			text-align: center;
		}

		.line-title {
			font-size: 24rpx;
			line-height: 44rpx;
			color: #777777;
			position: relative;
		}

		.line-title::before {
			position: absolute;
			width: 240rpx;
			height: 2rpx;
			background-color: #AAAAAA;
			content: '';
			left: 32rpx;
			top: 21rpx;
		}

		.line-title::after {
			position: absolute;
			width: 240rpx;
			height: 2rpx;
			background-color: #AAAAAA;
			content: '';
			right: 32rpx;
			top: 21rpx;
		}

		::v-deep .uni-popup__wrapper-box {
			padding-bottom: 0;
		}
	}
</style>
